<template>
    <div>
        <h1>Show</h1>
        <p v-for="item in a.arr">{{ item }}</p>
        <input type="button" value="修改reactive类型的数据" @click="fn">
    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
    //let 表示定义一个变量;
    //const 表示定义一个常量;
    let num=ref(100);
    let str=ref('好好学习，天天向上');
    let arr=ref([1,3,4,564,321,2323]);
    let obj=ref({name:'张三',age:'20'});
    let objArr=ref([
        {id:1,name:'张11',age:10},
        {id:2,name:'张22',age:11},
        {id:3,name:'张33',age:12},
        {id:4,name:'张44',age:13},
    ]);

    let a=reactive({
        str:'好好学习',
        num:100,
        arr:[1,34,1,1],
        objArr:[{id:1,name:'张11',age:10},
        {id:2,name:'张22',age:11},
        {id:3,name:'张33',age:12},
        {id:4,name:'张44',age:13},],
    });

    const fn=()=>{
        a.arr[2]=100;
    }
</script>

<style scoped>

</style>